<template>
  <div>

    <el-form ref="form" :inline="true" :model="data" class="demo-form-inline" label-width="120px" size="medium" label-position="left" :rules="rules">
      <el-row>

        <el-col :span="12">
          <el-form-item label="所属项目" prop="project_id">
            <el-select v-model="data.project_id" placeholder="请选择所属项目" @change="projectChange" clearable>
              <el-option
                v-for="item in projectList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="所属任务" >
            <el-select v-model="data.task_id" placeholder="请选择所属任务" @change="taskChange" clearable>
              <el-option
                v-for="item in taskList"
                :key="item.id"
                :label="item.task_name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="问题名称" prop="problem_name">
            <el-input v-model="data.problem_name" placeholder="请输入问题名称" clearable></el-input>
          </el-form-item>
        </el-col>

<!--        <el-col :span="12">-->
<!--          <el-form-item label="问题编号" prop="problem_no">-->
<!--            <el-input v-model="data.problem_no" placeholder="请输入问题编号" clearable></el-input>-->
<!--          </el-form-item>-->
<!--        </el-col>-->

        <el-col :span="12">
          <el-form-item label="问题类型" prop="problem_type_id">
            <el-select v-model="data.problem_type_id" placeholder="请选择问题类型" @change="typeChange" clearable>
              <el-option
                v-for="item in types"
                :key="item.id"
                :label="item.dict_val"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="优先级" prop="priority_id">
            <el-select v-model="data.priority_id" placeholder="请选择优先级" @change="priorityChange" clearable>
              <el-option
                v-for="item in prioritys"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <!--          <el-col :span="12">-->
        <!--            <el-form-item label="问题目标" prop="target">-->
        <!--              <el-select v-model="data.target"  placeholder="请选择问题目标" @change="targetChange" clearable>-->
        <!--                <el-option-->
        <!--                  v-for="item in targets"-->
        <!--                  :key="item.value"-->
        <!--                  :label="item.label"-->
        <!--                  :value="item.value">-->
        <!--                </el-option>-->
        <!--              </el-select>-->
        <!--            </el-form-item>-->
        <!--          </el-col>-->



        <el-col :span="12">
          <el-form-item label="负责人"  prop="functionary_id">

            <el-select v-model="data.functionary_id" placeholder="请选择负责人" @change="peopleChange" clearable>
              <el-option
                v-for="item in peoples"
                :key="item.member_id"
                :label="item.member_name"
                :value="item.member_id">
              </el-option>
            </el-select>

          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="期望完成日期" prop="expect_end_time" >
            <el-date-picker
              clearable
              v-model="data.expect_end_time"
              type="date"
              :editable="false"
              :clearable="false"
              placeholder="请选择完成日期"
              :picker-options="pickerOptions">
            </el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="问题描述" prop="problem_describe" class="special-form-item">
            <el-input
              clearable
              placeholder="请输入问题描述"
              v-model="data.problem_describe"
              type="textarea"
              :rows="2">
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

  </div>
</template>

<script>
    import {projectName} from "../../../../api/sampleInspection";

    export default {
        name: "addProblemView",
        data:function () {
            return{
                pickerOptions: {
                    disabledDate:time=> {
                        if (time.toLocaleDateString() == new Date().toLocaleDateString()){
                            return false
                        }
                        return time.getTime() < new Date().getTime();
                    }
                },
                data:{
                    problem_no:'',
                    priority:'',
                    priority_id:'',
                    problem_name:'',
                    problem_type_id:'',
                    problem_type:'',
                    project_id:'',
                    project_name:'',
                    task_name:'',
                    task_id:'',
                    functionary:'',
                    functionary_id:'',
                    expect_end_time:'',
                    problem_describe:'',
                    target:'',
                },
                targets:[
                    {
                        value:1,
                        label:'项目'
                    },
                    {
                        value:2,
                        label:'任务'
                    }
                ],
                types:[],
                prioritys:[
                    {
                        value:"1",
                        label:'高'
                    },
                    {
                        value:"2",
                        label:'中'
                    },
                    {
                        value:"3",
                        label:'低'
                    }
                ],
                rules:{
                    problem_name: [
                        { required: true, message: '请输入问题名称', trigger: 'blur' }
                    ],
                    problem_no: [
                        { required: true, message: '请输入问题编号', trigger: 'blur' }
                    ],
                    problem_type_id: [
                        { required: true, message: '请选择问题类型', trigger: 'change' }
                    ],
                    priority_id: [
                        { required: true, message: '请选择优先级', trigger: 'change' }
                    ],
                    project_id:[
                        { required: true, message: '请选择所属项目', trigger: 'change' }
                    ],
                    task_id:[
                        { required: true, message: '请选择所属任务', trigger: 'change' }
                    ],
                    functionary_id: [
                        { required: true, message: '请选择负责人', trigger: 'change' }
                    ],
                    expect_end_time: [
                        { required: true, message: '请选择期望完成日期', trigger: 'change' }
                    ],
                    problem_describe: [
                        { required: true, message: '请输入问题描述', trigger: 'blur' }
                    ],
                    target: [
                        { required: true, message: '请选择问题目标', trigger: 'change' }
                    ],
                },
                projectList:[],
                taskList:[],
                peoples:[],
                project:{},
            }
        },
        created() {
            this.types = this.$store.getters.sysDic('problem_type')

            this.$api.PROJECT_MANAGER_PROJECT_LIST_DOING().then(res=>{
                if (res.code === 200) {


                    if (res.data.data){
                        res.data.data.forEach(item=>{
                            let phases = ""
                            if (item.project_phases_id == "1"){
                                phases = "临床前研究"
                            }else{
                                phases = "临床研究"
                            }
                            item.name = item.project_name + '(' + phases + ')'
                        })
                        this.projectList = res.data.data || [];
                    }
                }
            });
            // projectName({
            //     project_status: [6, 7, 61, 62, 63, 64,72]
            // }).then(res=>{
            //     if (res.code === 200) {
            //         this.projectList = res.data.data || [];
            //     }
            // });

        },
        methods:{
            targetChange:function(){
                if (this.data.target == 1){
                    if (this.data.project_id){
                        this.data.functionary_id = this.project.project_person_in_charge_id;
                        this.data.functionary = this.project.project_person_in_charge;
                    }
                }else{
                    this.data.functionary_id = ''
                    this.data.functionary = ''

                    this.getTaskData(this.project.id)
                }
            },
            projectChange:function(id){
                console.log(id)
                if (id){
                    let index = this.projectList.findIndex(a=>a.id == id)
                    if (index != -1){
                        let type = this.projectList[index]

                        this.data.project_id = type.id + "";
                        this.data.project_name = type.project_name;

                        this.getProjectData(type.id)
                        // this.getTaskData(type.id)

                    }
                }else{
                    this.project = null
                    this.data.project_id = "";
                    this.data.project_name = "";
                }

                this.data.task_id = "";
                this.data.task_name = "";
                this.data.functionary_id = "";
                this.data.functionary = "";

            },
            getProjectData:function(id){
                this.$api.PROJECT_MANAGER_PROJECT_DETAIL(id).then(res=>{
                    if (res.code == 200){
                        this.project = res.data;
                        this.peoples = [...res.data.member]

                        this.taskList = [];
                        this.dealTaskData(res.data.project_task ? res.data.project_task : [])
                    }else{
                        this.$message.error(res.msg)
                    }
                }).catch(err=>{

                })
            },
            getTaskData:function(id){
                this.$api.PROJECT_START_TASK_PROJECT_TREE({project_id:id}).then(res=>{
                    if (res.code == 200){
                        this.taskList = [];
                        this.dealTaskData(res.data ? res.data : [])
                    }
                })
            },
            dealTaskData:function(list){
                for (let i = 0; i < list.length; i++){
                    let data = list[i];
                    this.taskList.push(data);
                    if (data.children && data.children.length){
                        this.dealTaskData(data.children)
                    }
                }
            },
            taskChange:function(id){
                if (id){
                    let index = this.taskList.findIndex(a=>a.id == id)
                    if (index != -1){
                        let type = this.taskList[index]
                        this.data.task_id = type.id + "";
                        this.data.task_name = type.task_name;

                        this.peoples = [...type.task_member]
                    }
                }else{
                    if (this.project){
                        this.peoples = [...this.project.member]
                    }
                    this.data.task_id = "";
                    this.data.task_name = "";
                }
                this.data.functionary_id = "";
                this.data.functionary = "";
            },
            peopleChange:function (id) {
                let index = this.peoples.findIndex(a=>a.member_id == id)
                if (index != -1){
                    let type = this.peoples[index]
                    this.data.functionary_id = type.member_id + "";
                    this.data.functionary = type.member_name;
                }
            },
            typeChange:function (id) {
                let index = this.types.findIndex(a=>a.id == id)
                if (index != -1){
                    let type = this.types[index]
                    this.data.problem_type_id = type.id + "";
                    this.data.problem_type = type.dict_val;
                }
            },
            priorityChange:function (id) {
                let index = this.prioritys.findIndex(a=>a.value == id)
                if (index != -1){
                    let type = this.prioritys[index]
                    this.data.priority_id = type.value + "";
                    this.data.priority = type.label;
                }
            },
            formValidate:function () {

                return this.$refs.form.validate()
            }
        }
    }
</script>

<style lang="scss" scoped>
  ::v-deep .el-form-item{
    width: 100%;
    .el-form-item__content{
      width: 200px;
    }
    .el-input{
      width: 200px;
    }
  }
  ::v-deep .special-form-item{
    width: 100%;
    .el-form-item__content{
      width: calc( 100% - 120px);
    }
    .el-textarea{
      width: 555px;
    }

  }
</style>
